import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    ScrollView,
    Image,
    TouchableOpacity
} from 'react-native';

var Dimensions = require('Dimensions');

var { width, height } = Dimensions.get('window')

export default class WorkItem extends Component {
    render() {

        var style = styles.itemStyleElse;
        var imgStyle = styles.imgElseStyle;

        if (this.props.item.styleType === '0') {
            style = styles.itemStyle;
            imgStyle = styles.imgFirstStyle;
        } else if (this.props.item.styleType === '1') {
            style = styles.itemStyleElseFourth;
        }

        return (
            <TouchableOpacity
                activeOpacity={1}
                onPress={() => this.props.buttonPress(this.props.item)}
                style={style}>
                <Image source={{ uri: this.props.item.imageName }}
                    style={imgStyle}
                />
                <Text style={{ marginBottom: 20 }}>{this.props.item.name}</Text>
            </TouchableOpacity>
        );
    }
}


const styles = StyleSheet.create({

    itemStyle: {
        flex: 1,
        alignItems: 'center',
        borderRightWidth: 0.5,
        borderRightColor: 'gray',
    },
    itemStyleElse: {
        flex: 1,
        alignItems: 'center',
    },
    itemStyleElseFourth: {
        flex: 1 / 4,
        alignItems: 'center',
    },
    imgElseStyle: {
        marginTop: 20, marginBottom: 10, width: 32, height: 32
    },
    imgFirstStyle: {
        marginTop: 5, marginBottom: 10, width: 41, height: 41
    }

})
